<template>
  <view class="index-page">
    <xflType v-if="hyType.id == 4" :integralsRuleId="4"></xflType>
    <clType v-else-if="hyType.id == 6" :integralsRuleId="6"></clType>
    <hyAllType v-else></hyAllType>

    <hy-tabbar bgColor="#fff"></hy-tabbar>
  </view>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import {
  onReady,
  onShow,
  onLoad,
  onReachBottom,
  onPageScroll,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'

//各个模块的组件
import hyAllType from './hyAllType.vue'
import xflType from './xflType.vue'
import clType from './clType.vue'

const hyType = ref<any>({})

//页面初次
onShow(() => {
  if (uni.getStorageSync('hyType')) {
    hyType.value = JSON.parse(uni.getStorageSync('hyType'))
  } else {
    hyType.value = { name: '黑银', id: 0 }
  }
})

onReady(() => {
  console.log('查看模式呢==》', hyType.value)
  if (uni.getStorageSync('hyType')) {
    hyType.value = JSON.parse(uni.getStorageSync('hyType'))
  } else {
    hyType.value = { name: '黑银', id: 0 }
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/helper.scss';

.index-page {
  font-style: normal;
  text-align: center;
  min-height: 100vh;
  background-color: #f6f6f6;
}

.section {
  background: #fff;
  padding: 20rpx;
  margin-top: 20rpx;
}

.tit {
  text-align: left;
  font-weight: bold;
}

.actions {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  .item {
    width: 20%;
    margin-bottom: 20rpx;

    .icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.swiper {
  height: 110px;
  margin-top: 20rpx;

  .item {
    width: 100%;
    height: 100%;
  }
}

.hdBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 30rpx;
  margin-top: 20rpx;

  .link {
    display: flex;
    align-items: center;

    .name {
      font-weight: 600;
      font-size: 30rpx;
      margin-left: 10rpx;
    }

    .hy-icon-arrow-right {
      margin-left: 10rpx;
      font-size: 26rpx;
      font-weight: bold;
    }
  }

  .rest {
    font-size: 26rpx;
    color: $uni-text-color-light;
    font-weight: 600;

    .num {
      font-weight: 600;
      font-size: 30rpx;
      color: $uni-text-color;
    }
  }
}

.container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 30rpx;
  gap: 20rpx;

  .itemWrap {
    width: calc((100% - 40rpx) / 3);
    border-radius: $section-raduis;
    background: $uni-bg-color-white;
    margin-bottom: $uni-spacing-col-lg;
    overflow: hidden;

    .contentBox {
      .imgCover {
        position: relative;
        width: 100%;
        flex-shrink: 0;
        margin-right: 20rpx;

        .img {
          width: 100%;
          // height: 200rpx;
          border-radius: $section-raduis;
        }
      }

      .content {
        padding: $uni-spacing-row-lg;
        text-align: left;

        .name {
          @include ellipsis;
          font-size: 28rpx;
        }

        .money {
          color: red;
          font-size: 26rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
}

.rec {
  font-size: 30rpx;
  font-weight: bold;
  text-align: left;
  margin-bottom: 26rpx;
  margin-left: 20rpx;
}
</style>
